<template>
  <div class="list_item">
    <div v-for="(item) in articleListData" :key="item.id">
      <articleModule :data="item">
        <h2  slot="article_title" class="title" @click="goAnchor('#par',item.id)">{{item.title}}</h2>
        <!-- <router-link tag="h2" to="/parPage" slot="article_title" class="title">{{item.title}}</router-link> -->

        <ul slot="articleInfo" class="article_info_list">
          <li @click="clickPraise(item.id)">
            <i class="iconfont icon-xin1" v-if="heartShow"/>
            <i class="iconfont icon-xin" style="color:#f00" v-else/>
            {{item.zancount}}
          </li>
          <li @click="goAnchor('#comment', item.id)">评论数:({{item.comcount}})</li>
          <li>阅读量:{{item.click}}</li>
        </ul>
      </articleModule>
    </div>
  </div>
</template>

<script>

import articleModule from '../../components/articleModule/articleModule'

// import data from '@/mock/homeListData.json'
import axios from 'axios'
import {mapState} from 'vuex'


export default {
  components: {
    articleModule
  },
  data() {
    return {
      heartShow: true,
      // listData: data.homeList
    }
  },
  computed: {
    ...mapState(['articleListData','userInfo'])
  },
  methods: {

    //点赞
    clickPraise(number) {
      if(!this.userInfo){
        this.$emit('openLogin')
        return
      }

    },
    // 点击跳转评论区
    goAnchor(anchor,id) {
      this.$emit('goAnchorData',anchor)
      this.$router.push('/parPage/'+id)
    },

     // 获取文章列表数据
    getArticleListData(res){
      const result = res.data
      if(result.status === 1){
        this.$store.commit('getArticleListData',result.data)
      }
    }
  },
  mounted() {
    axios.post('http://97079707.com/api/index/index')
    .then(this.getArticleListData)
  },
}
</script>

<style scoped>
.list_item {
  width: 100%;
  height: 100%;
}
.title {
  overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.title:hover {
  color: #fff;
  cursor: pointer;
}
.article_info_list > li:nth-child(1):hover {
  color: #fff;
  cursor: pointer;
}
.article_info_list > li:nth-child(2):hover {
  color: #fff;
  cursor: pointer;
}
</style>
